import React, { Component } from 'react'
import '../base/css/maoyan.css'
import Film from './component/Film'
import Cinema from './component/Cinema'
import Center from './component/Center'

export default class App extends Component {
    state = {
        list: [
            {
                id: 1,
                text: '首页'
            },
            {
                id: 2,
                text: '影院'
            },
            {
                id: 3,
                text: '我的'
            },
        ],
        current:0
    }
    render() {
        return (
            <div>
                {
                    this.state.current === 0?<Film />:null
                }
                {
                    this.state.current === 1?<Cinema />:null
                }
                {
                    this.state.current === 2?<Center />:null
                }
                <ul>
                    {
                        this.state.list.map((item,index) => 
                            <li key={item.id} 
                                className={this.state.current === index?'active':''}
                                onClick={()=>this.checkCard(index)}
                            >
                                {item.text}
                            </li>
                        )
                    }
                </ul>
            </div>
        )
    }
    checkCard = (index)=>{
        this.setState({
            current:index
        })
    }
}
